<template>
  <el-tabs v-model="activeName" class="demo-tabs"
           @tab-change="TabChange">

    <el-tab-pane label="任务列表" name="list">
      <div>
        <el-button type="success" @click="ToCreate('')">创建</el-button>
        <el-input v-show="sinput" v-model="search" :suffix-icon="Search" class="table_search" placeholder="搜索"/>
      </div>
      <Table v-model:data="tableData" @submit="ToCreate(null)">
        <el-table-column prop="name" sortable label="任务名" width="180"/>
        <el-table-column prop="ctime" sortable label="创建时间" width="180"/>
        <el-table-column prop="Owner.username" label="创建人"/>
        <el-table-column prop="Env.name" label="环境"/>
        <el-table-column prop="address" label="定时任务"/>
        <el-table-column prop="spec" label="开关" width="80">
          <template #default="scope">
            <el-switch :model-value="scope.row.switch" @click="Switch(scope.row)" :loading="scope.row.loading">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template #default="scope">
            <Status :status="scope.row.status"></Status>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <div class="operation">
              <el-button link @click="RunTask(scope.row.name)" type="success">运行</el-button>
              <el-button link @click="ToCreate(scope.row.name)" type="warning">修改</el-button>
              <el-button link @click="DeleteTask(scope.row.name)" type="danger">删除</el-button>
              <el-button link @click="OpenCopy(scope.row.name)" type="info">复制</el-button>
            </div>
          </template>
        </el-table-column>
      </Table>
      <Pagination @change="ListTask" v-model:page="page"/>
    </el-tab-pane>

    <el-tab-pane label="历史任务" name="history">
      <HisTask/>
    </el-tab-pane>

    <el-tab-pane label="计划管理" name="plan">
    </el-tab-pane>
  </el-tabs>


  <Dialog v-model:diag="CopyDialog" title="复制任务" width="25%" @submit="CopyTask">
    <keep-alive>
      <el-form label-position="top">
        <el-form-item label="新任务名">
          <el-input v-model="new_name" style="width: 100%"/>
        </el-form-item>
      </el-form>
    </keep-alive>
  </Dialog>


</template>

<script lang="ts" setup>
import {ElMessageBox} from 'element-plus'
import {onMounted, reactive, ref} from 'vue'
import {useRouter} from "vue-router"
import {task} from "./js/task"
import {MSuccess} from "@/api/base"
import Pagination from '@/components/common/Pagination.vue'
import Table from '@/components/common/Table.vue'
import Status from '@/components/common/Status.vue'
import Dialog from '@/components/common/Dialog.vue'
import HisTask from './histask.vue'
import {Search} from "@element-plus/icons-vue";

const router = useRouter()
const activeName = ref('list')
const search = ref("")
let page = reactive({"page": 1, "size": 15, "total": 0})

const tableData = ref([])
const sinput = ref(true)
onMounted(() => {
  ListTask()
})

const TabChange = (newName) => {
}

const ListTask = async () => {
  var res = await task.List(page)
  tableData.value = res.data
  page.total = res.total
}

//获取关注任务列表
const ListCareTask = async () => {

}

const Switch = (row) => {
  row.loading = true
  var s = false
  if (row.switch == false) {
    var str = "开启定时任务"
    s = true
  } else {
    var str = "关闭定时任务"
    s = false
  }
  ElMessageBox.confirm("确认要执行此操作吗？", str).then(() => {
    task.Switch({"name": row.name, "switch": s})
        .then(async (response) => {
          MSuccess(response)
          row.loading = false
          await ListTask()

        })
  })
}

const old_name = ref("")
const new_name = ref("")
const copy_tile = ref("")
const CopyDialog = ref(false)

const ToCreate = (name) => {
  if (name == "" || name == undefined || name == null) {
    router.push({"name": "任务创建(修改)"})
    return
  }

  router.push({"name": "任务创建(修改)", query: {"data": name}})

}

const OpenCopy = (name) => {
  old_name.value = name
  copy_tile.value = "复制任务：" + name
  CopyDialog.value = true
}

const CopyTask = async () => {
  await task.Copy({"name": old_name.value, "new_name": new_name.value})
  ListTask()
  CopyDialog.value = false
}

const DeleteTask = async (name) => {
  ElMessageBox.confirm("确认要删除任务" + name + "吗?").then(async () => {
    await task.Delete(name)
    await ListTask()
  })
}

const RunTask = async (name) => {
  await ElMessageBox.confirm("确认要运行此任务吗？", name).then(() => {
    task.Run(name)
  })
}
</script>

<style scoped lang="scss">
@import "@/styles/table_header.scss";

.el-message-box {
  vertical-align: top;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.operator {
  padding-top: 8px;
}

.el-input {
  float: right;
  width: 200px;
}

.el-pagination {
  float: right;
}

.operation > button {
  margin: 0;
  padding: 0 2px;
}

.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

:deep(.el-dialog__body) {
  padding: 0 !important;
}
</style>
